<template>
  <div>
    <!--给input标签添加 webkitdirectory mozdirectory odirectory选择文件夹上传 -->

    <div ref="box" class="box" @click="upload">获取拖拽上传的文件</div>
    <input type="file" multiple @change="change" />

    <el-table :data="data" style="width: 100%">
      <el-table-column prop="date" label="上传日期">
        <template v-slot="scope">
          {{ scope.row.lastModifiedDate }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="文件名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="type" label="类型"> </el-table-column>
      <el-table-column prop="type" label="传输进度">
        <template v-slot="scope">
          <progress value="250" max="1000"><span>25</span>%</progress>
        </template>
      </el-table-column>
      <el-table-column prop="size" label="大小">
        <template v-slot="scope">
          {{ (scope.row.size / 1024).toFixed(2) }}kb
        </template>
      </el-table-column>
    </el-table>

    <el-button class="btn" @click="uploads($event)">上传</el-button>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from "vue";
const box = ref();
const data = ref([]);
const uploads = (e) => {
  console.log(e.target, box.value);

  e.target.scrollIntoView({ behavior: "smooth" });
};
onMounted(() => {
  // 获取网络连接
  window.addEventListener("online", () => {
    // 获取连接的网络状态
    const connectionInfo = navigator.connection;
    console.log("在线", connectionInfo);
  });
  window.addEventListener("offline", () => {
    console.log("掉线线");
  });
  box.value.addEventListener("dragstart", () => {});
  box.value.addEventListener("dragover", (e) => {
    e.preventDefault();
  });
  box.value.addEventListener("drop", (e) => {
    e.preventDefault();
    console.log(e.dataTransfer.files);
    data.value.push(...e?.dataTransfer?.files);
    data.value = [...data.value];
    const input = document.createElement("input");
    input.click();
  });
});
const upload = () => {
  const input = document.createElement("input");
  input.type = "file";
  input.setAttribute("multiple", "true");
  input.click();
  input.addEventListener("progress", (e) => {
    console.log("progress", e);
  });
  input.addEventListener("change", (e) => {
    data.value.push(...e.target?.files);
    data.value = [...data.value];
  });
};
const change = (e) => {
  console.log(e);
};
</script>

<style  scoped>
.box {
  width: 800px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

